<%var csstpl = {%>
<style type="text/css">
	[v-cloak] {
		display: none;
	}
	table tbody a{color: #337ab7;}
	.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table[lay-even] tr:nth-child(even) {background: none !important;}
	.layui-table thead tr { background:#f2f2f2 !important; border:1px solid #e6e6e6; }
	.layui-table thead tr th { border:none; }
	.layui-table tbody { margin:100px 0; }
	table tbody tr.sep { height: 15px; }
	.layui-table tbody tr.trhead { background:#F8F8F8; border:1px solid #e7eaec; }
	.layui-table tbody tr.trhead:hover { background:#F8F8F8 !important; }
	.layui-table tbody tr.trhead .td1 { text-align:left; border-right:none !important; }
	.layui-table tbody tr.trhead .td2 { text-align:right; border-left:none !important; }
	.layui-table tbody td { text-align:center; }
	.layui-table tbody .pro_info { text-align:left; }
	.layui-table tbody .pro_info img { float:left; margin-right:10px; }
	.product_talbe tr td{
		border: none;
	}
	.product_talbe tr:first-child{
		border-top: 1px solid #e5e5e5;
	}
	.product_talbe tr:last-child{
		border-bottom: 1px solid #e5e5e5;
	}
    .layui-icon{
        font-size: 16px;
    }

    .yuanxing{
        color: #fff;
        background-color: #000;
        width: 20px;
        height: 20px;
        border-radius: 50px;
        -moz-border-radius: 50px;
        -webkit-border-radius: 50px;
        margin-left: 5px;
		display: inline-block;
		text-align: center;
    }

    .shouru_div{
        width: 180px;
        height: 130px;
        display: none;
        background-color: #000;
        color: #fff;
        padding: 10px 10px;
        border-radius: 5px;
        position: absolute;
        left: 30px;
        top: -148px;
    }
    .shouru_div p{
        padding: 5px;
        border-bottom: 1px #fff dashed ;
    }
    .shouru_div p span{
        position: absolute;
        right: 10px;
    }

    .shouru_div p:last-child{
        border-bottom: none;
    }

    .shouru_div i {
        border-top-color: #000;
        position: absolute;
        left: 88px;
        bottom: -12px;
    }

</style>
<%};%>
<%var jstpl = {%>
<script>
var app = new Vue({
	el: "#gexin_body",
	data: {
		query: {
			sn: "",
			status:"",
			refund_status:"",
			original_price:"",
			business_type:"",
			create_time:"",
			shipping_user:"",
			pageNumber: 1,
			pageSize: 10
		},
		data_result: []
	},
	created: function() {
		this.loadPage("init");
	},
	methods: {
		loadPage: function (model) { //载入模式有两种  init初始化载入 load分页载入
			if (model == "init") {
				this.query.pageNumber = 1;
			}
			Ajax("/system/order/loadData", this.query, function (d) {
				if(!d.state){
					gx.alert(d.msg);
					return false;
				}
				if(d.data.list==null || d.data.list.size<=0 || d.data==null){
					app.query.pageNumber=1;
					app.data_result=[];
					return false;
				}
				app.data_result = d.data.list;
				if (d.data.firstPage == true) {
					layui.laypage.render({
						elem: 'gexin_page' //注意，这里的 test1 是 ID，不用加 # 号
						,
						layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
						count: d.data.totalRow //数据总数，从服务端得到
						,
						limit: app.query.pageSize,
						jump: function (obj, first) {
							app.query.pageNumber = obj.curr;
							if (app.query.pageSize != obj.limit) {
								app.query.pageSize = obj.limit;
								app.loadPage("init");
								return;
							}
							if (!first) {
								app.loadPage("load");
							}
						}
					});
				}
			})
		},
		selectBtn: function () {//查询按钮触发事件
			this.loadPage("init");
		},
		synChronizeBtn: function () {
			gx.confirm("您是否继续执行此操作?", function () {
				Ajax("/system/ele/order/SynOrderList?admin_source=${admin_source!}", function (ret) {
					if (ret.state) {
						gx.alerts(ret.msg, function () {
							layer.closeAll();
							app.loadPage("init");
						});
					} else {
						gx.alert(ret.msg);
					}
				})
			})
		},
		selectProduct:function (id) {
			 var wenzi= $(".state_b_"+id).text();
			 if(wenzi=="展开"){
				 $(".product_table_"+id).show();
			 	wenzi="收起";
			 }else{
				 $(".product_table_"+id).hide();
				wenzi="展开";
			 }
			$(".state_b_"+id).text(wenzi);
		},
        enter:function(id){
		    $(".sr_tc_"+id).show();
        },
        leave:function (id) {
            $(".sr_tc_"+id).hide();
        },
		printOrder:function (id) {
			gx.confirm("您是否确定打印此订单？",function () {
				Ajax("/system/order/printOrder",{id:id},function (ret) {
					if(ret.state){
						gx.alert(ret.msg);
					}else{
						gx.alert(ret.msg);
					}
				})
			})
		}

	},filters: {
		hidePhone:function (value) {
			return value==null?'无':value.substring(0, 3)+"****"+value.substring(8, value.length);
		},
        timeConversionFormat:function (value) {
            if(value==null || value==""){
                return "无";
            }else{
                return value.substring(5,value.length-3);
            }
        }
	}
})

$(function(){
	var form = layui.form;

	
	form.on('select(status)', function(data) {//监听
		app.query.status=data.value;
		app.loadPage("init");
	});
	
	form.on('select(refund_status)', function(data) {//监听
		app.query.refund_status=data.value;
		app.loadPage("init");
	});

	form.on('select(business_type)',function(data){
		app.query.business_type=data.value;
		app.loadPage("init");
	});
	
	//监听品牌下拉框 获取店铺数据
	form.on('select(selBrand)', function(data){
		app.query.wx_shopid="";
			Ajax("/system/ele/order/getShopList?brandId="+data.value+"&admin_source=${admin_source!}",function(d){
				var shopHtml = '<option value="">请选择店铺</option>';
				if(d.state){
					for (var i = 0; i < d.data.length; i++) {
						shopHtml += '<option value="' + d.data[i].shop_id + '">' + d.data[i].shop_name + '</option>';
					}
				}
				$("#selShop").html(shopHtml);
				form.render();
			})
		
		app.query.brand_id=data.value;
		app.loadPage("init");
	});
	
	//监听店铺下拉框
	form.on('select(selShop)', function(data){
		app.query.wx_shopid=data.value;
		app.loadPage("init");
	});


})

$(document).ready(function() {
	
	var laydate = layui.laydate;
	laydate.render({
		  elem: '#start' //指定元素
		  ,type: 'datetime'//精确到 时分秒
		  ,range: true
		  ,change: function(value, date, endDate) {
				app.query.create_time = value;
				app.loadPage("init");
		  },done: function(value, date, endDate){
			  	app.query.create_time = value;
				app.loadPage("init");
		  }
		});
})
</script>
<%};%>
<%layout("../layout/_layout_layui.html",{title:'订单列表',jstpl:jstpl,csstpl:csstpl}){ %>
<div class="layui-row" v-cloak>
	<form class="layui-form" method="post" action="/system/ele/order" role="form">

		<div class="layui-col-md3">
			<div class="layui-form-item">
				<label class="layui-form-label">订单状态</label>
				<div class="layui-input-block">
				  <select lay-filter="status">
				   <option value="">请选择订单状态</option>
				   <%for(s in status_list!){%>
				   <option value="${s.busi_value!}">${s.busi_name!}</option>
				   <%}%>
				 </select>
				</div>
			</div>
		</div>
		

		<div class="layui-col-md3">
			<div class="layui-form-item">
				<label class="layui-form-label">订单号</label>
				<div class="layui-input-block">
				  <input type="text" v-model="query.sn" placeholder="请输入订单号查询" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		
		<div class="layui-col-md3">
			<div class="layui-form-item">
				<label class="layui-form-label">订单总价</label>
				<div class="layui-input-block">
				  <input type="text" v-model="query.original_price" placeholder="请输入订单总价" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>
		
		<div class="layui-col-md3">
			<div class="layui-form-item">
				<label class="layui-form-label">下单时间</label>
				<div class="layui-input-block">
					 <input type="text"  v-model="query.create_time" id="start" placeholder="下单时间" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>

		<div class="layui-col-md4">
			<div class="layui-form-item">
				<label class="layui-form-label">关键字</label>
				<div class="layui-input-block">
					<input type="text" v-model="query.shipping_user" placeholder="根据顾客姓名、手机号模糊查询" autocomplete="off" class="layui-input">
				</div>
			</div>
		</div>

		<div class=" layui-col-md3" style="padding-left: 15px;">
			<div class="layui-form-item">
				 <button type="button" class="layui-btn" @click="selectBtn"><i class="layui-icon">&#xe615;</i>查询/筛选</button>
			</div>
		</div>
		
		<table class="layui-table layui-tab-content" style="margin-top: 15px" lay-skin="line">
			<tbody v-for="item in data_result">
				<tr class="sep"></tr>
				<tr class="trhead">
					<td colspan="4" class="td1">
						<span style="font-size: 24px;font-weight: bolder;color: #1989fa;">{{item.order_sn}}</span>
                        <span style="padding-left: 20px; font-size: 14px;font-weight: bold;" v-if="item.is_presell==1">预付款订单</span>
						<span style="right: 20px;position: absolute;">{{item.order_status_name}}</span>
					</td>
				</tr>
				<tr>
                    <td style="width: 20px;">
                        <img   src="">
                    </td>
					<td colspan="3" style="min-height: 60px;height: 60px;" >
						<span style="display: block; text-align: left;">{{item.shipping_user}}&nbsp;&nbsp;{{item.shipping_tel |hidePhone}}<b style="right: 20px;position: absolute;">多余字段</b></span>
						<p style="text-align: left;">{{item.address}}</p>
					</td>
				</tr>

                <tr v-if="item.order_status==3" >
                    <td style="width: 20px;">
                        <img  src="">
                    </td>
                    <td colspan="3" style="text-align: left;">
                        <p>{{item.shipping_comp_name}}<b>（{{item.shipping_sn}}）</b></p>
                    </td>
                </tr>
				<tr>
                    <td style="width: 20px;">
                        <img  src="">
                    </td>
					<td colspan="3" style="text-align: left;" >
						<span style="display: block; font: 16px bolder; color: #2d2f33;">{{item.shop_count}}&nbsp;件商品 <b style="color: #1989fa;right: 20px;position: absolute;" @click="selectProduct(item.id)" :class="'state_b_'+item.id">展开</b></span>
					</td>
				</tr>

                <tr style="display: none;" :class="'product_table_'+item.id" v-for="p in item.product_list">
                    <td></td>
                    <td style="text-align: left;" >{{p.product_name}}</td>
                    <td style="text-align: right;" >×{{p.product_cnt}}</td>
                    <td style="text-align: right;" >{{p.product_price}}</td>
                </tr>
				<tr>
                    <td>
                        <img  src="">
                    </td>
					<td style="text-align: left;font: 16px bolder; color: #2d2f33;">顾客实付</td>
                    <td colspan="2" style="text-align: right;"><b style="color: #5a5e66;">¥{{item.payment_money}}</b></td>
				</tr>
                <tr>
                    <td></td>
                    <td   style="text-align: left;">
                        <p>支付时间:{{item.pay_time |timeConversionFormat }}</p>
                        <p>下单时间:{{item.create_time | timeConversionFormat}}</p>
                        <p>单号:{{item.order_id}}</p>
                    </td>
                    <td colspan="2" style="text-align: right;"><!-- 操作按钮放这里 -->
						<a v-if="item.status==1 || item.status==3 || item.status>=5" class="layui-btn layui-btn-primary" href="javascript:;" @click="printOrder(item.id)">打印订单</a>
                        <a class="layui-btn layui-btn-primary" :href="'/system/xcx/order/detail/'+item.id+'?admin_source=shangjia'">详情</a>
                    </td>
                </tr>

			</tbody>
				<tbody id="tbody_body" v-if="data_result.length==0">
					<tr >
					 <td  colspan="8" style="text-align:center;height:300px"><h1>没有数据</h1></td>
					</tr>
				</tbody>
		</table>
			<fieldset id="gexin_page" class="layui-elem-field layui-field-title" ></fieldset>
	</form>
</div>
<%}%>